{extend name="common/layout" /}

{extend name="common/layout" /}

{block name="css"}
<link href="/static/inspinia/css/plugins/dataTables/datatables.min.css" rel="stylesheet">
{/block}

{block name="contents"}
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>{$title}</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="col-md-12">
                        <form class="form-inline table-search-box">
                            <div class="form-group m-r-xs">
                                <select name="wechat_id" class="form-control">
                                    <option value="">请选择公众号</option>
                                    {volist name="wechatListById" id="v"}
                                    <option value="{$v.wechat_id}">{$v.name}</option>
                                    {/volist}
                                </select>
                            </div>
                            <div class="form-group m-r-xs">
                                <input type="text" name="keyword" class="form-control" placeholder="请输入昵称或openid">
                            </div>
                            <button type="button" class="btn btn-info m-r-xs _search"><i class="fa fa-search"></i>搜索</button>
                            <button type="button" class="btn btn-warning _refresh"><i class="fa fa-refresh"></i>&nbsp;同步用户</button>
                        </form>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="table-responsive">
                        <table class="table table-striped table-bordered table-hover dataTables"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}

{block name="js"}
<script src="/static/inspinia/js/plugins/dataTables/datatables.min.js"></script>
<script src="/static/inspinia/js/plugins/dataTables/dataTables.bootstrap4.min.js"></script>
<script>
    $(function(){
        const table = $('.dataTables').DataTable({
            ajax: {
                url: location.href,
                type: 'POST'
            },
            responsive: true,
            processing: true,
            serverSide: true,
            stateSave: true,
            order: [[0,'desc']],
            searchDelay: 700,
            dom: '<"html5buttons"B>lTgtpir',
            columns: JSON.parse('{$columns|raw}'),
            language: {
                url: '/static/datatables.zh.json'
            },
            drawCallback: function(e){
                $('.btn-edit').off().on('click',function(){
                    let action = $(this).data('action');
                    $('#commonModal').modal('show').load(action);
                });
                $('.btn-remove').off().on('click',function(){
                    let action = $(this).data('action'),tr = $(this).parents('tr');
                    layer.confirm('是否确认删除?',{icon:2},function(){
                        layer.load(1);
                        $.getJSON(action,function(res){
                            layer.closeAll();
                            layer.msg(res.msg);
                            if(res.success){
                                tr.remove();
                            }
                        })
                    });
                });
            },
            buttons: [
                {extend: 'csv'},
                {extend: 'excel', title: 'ExampleFile'},
                {extend: 'pdf', title: 'ExampleFile'},
                {extend: 'print',customize:function (win){
                        $(win.document.body).addClass('white-bg');
                        $(win.document.body).css('font-size', '10px');
                        $(win.document.body).find('table').addClass('compact').css('font-size', 'inherit');
                    }
                }
            ]

        });
        $('._search').click(function(){
            let params = {};
            $('.table-search-box').find('input,select').each(function(){
                params[$(this).attr('name')] = $(this).val();
            });
            table.settings()[0].ajax.data = params;
            table.ajax.reload();
        });
        $('._refresh').click(function(){
            layer.load();
            $.getJSON('{:url(\'sync\')}',function(res){
                layer.closeAll();
                layer.alert(res.msg);
            });
        });
    });
</script>
{/block}